<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
export default {
  name: 'PieChart',
  props: ['data'],
  data() {
    return {
    }
  },
  mounted() {
    this.drawChart()
  },
  watch: {
    'data.data': function(val) {
      this.drawChart()
    },
    deep: true
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$el)
      // 绘制图表
      let colors = ['#FC5D5E', '#FEB80E', '#56A8EE', '#259B24']
      this.myChart.setOption({
        silent: true,
        color: colors,
        legend: {
          show: false,
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['70%', '100%'],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data.data
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.myChart.resize()
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
